<template>
	<!--区域经济现状分析-石河子市-->
	<div class="economic-shihezi">
        <el-row>
            <div class="return">
                <p @click="back">返回</p>
            </div>
			<el-col span="7">
				<chart-block chartID="chart1" :title="totalOutputValueOption.title" :optionData="totalOutputValueOption" chartType="getStackBar" height="38vh" titleType="blueBig" ></chart-block>
				<chart-block chartID="chart2" :title="industrialStructureChangeOption.title" :optionData="industrialStructureChangeOption" chartType="getStackBar" height="38vh" style="margin-top:3vh" titleType="blueBig" ></chart-block>
			</el-col>
			<el-col span="10">
				<p class="describe">{{toptitleText.AREA_NAME}}{{toptitleText.YEAR}}年实现生产总值{{toptitleText.SCZZ}}{{toptitleText.unit}};
					一产增加值{{toptitleText.DYCYZJZ}}{{toptitleText.unit}};
					二产增加值{{toptitleText.DECYZJZ}}{{toptitleText.unit}};
					三产增加值{{toptitleText.DSCYZJZ}}{{toptitleText.unit}}。</p>
                <bashi-map :map-data="mapData" style="height:70vh"></bashi-map>
            </el-col>
			<el-col span="7">
				<chart-block chartID="chart3" :title="aggregateInvestmentOption.title" :optionData="aggregateInvestmentOption" chartType="getShadowLine" height="38vh" titleType="blueBig" ></chart-block>
				<chart-block chartID="chart4" :title="agricultureTotalOption.title" :optionData="agricultureTotalOption" chartType="getBar" height="38vh" style="margin-top:3vh" titleType="blueBig" ></chart-block>
            </el-col>
		</el-row>
	</div>
</template>

<script>
import {getCommonData,getCommonData10} from '@/api/pages.js'
export default {
	name: "economic-shihezi",
	components: {
        ChartBlock: () => import('@/components/chart-block'),
		BashiMap: () => import('@/components/map/bashi-map'),
    },
	props: {},
	data() {
		return {
            totalOutputValueOption:{
                title:'',
				categoryAxis: [],
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				color: ["#01c188", "#ff6c00", "#1985ff"],

			},
			totalOutputValueOptionShow:false,
            industrialStructureChangeOption:{
                max:100,
                title:'',
				categoryAxis: [],
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				color: ["#01c188", "#ff6c00", "#1985ff"],

			},
			industrialStructureChangeOptionShow:false,
            aggregateInvestmentOption:{
                title:'',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				smooth:true,

				LinearGradientColor:[//柱状渐变颜色
					{
						topColor:'rgba(255,108,0,0.5)',
						bottomColor:'rgba(255,108,0,0.0)',
						LineCircleColor:"#ff6c00",//折线图颜色
						LineCircleBorderColor:"#ffffff",//折线图描边颜色
					},]
			},
			aggregateInvestmentOptionShow:false,
            agricultureTotalOption:{
                title:'',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor:[//柱状渐变颜色
					{
						topColor:'#ffa800',
						bottomColor:'#4be9fc'
					},
					{
						topColor:'#86ffc5',
						bottomColor:'#019b58'
					},
				],

			},
			agricultureTotalOptionShow:false,
            mapData:{
				mapData:[],
				effectData:[],
				scatterData:[],
			},
			toptitleText:[]
        }
	},
	computed: {},
	created() {
	},
	mounted() {
        this.getMapData()
        this.totalChange()
        this.constructionChange()
        this.speedChange()
        this.workersPeasantsChange()
        this.titleText()
		this.$store.commit("SET_BREAD2", '石河子发展现状分析');
	},
	methods: {
        //地图展示（最近一年各个区域的生产总值）
		getMapData() {
			getCommonData10({busiCode: 'C044'}).then(res => {
				if (res.data.code === 200) {
					res.data.data.list.map((item, index) => {
						this.mapData.mapData.push({
							name:item.name,
							value: item.product,
							unit: item.unit
						})
						if (item.name === '石河子市') {
							this.mapData.effectData.push({
								name: item.name,
								value: [item.longtitude, item.latitude, item.product, item.size],
								unit: item.unit
							})
						} else {
							this.mapData.scatterData.push({
								name: item.name,
								value: [item.longtitude, item.latitude, item.product, item.size],
								unit: item.unit
							})
						}
					})
				}
			}).catch(err => {
			})
		},
		//1.3.1.13石河子市生产总值变化(区域经济现状分析)
		totalChange(){
			getCommonData10({busiCode: 'E088'}).then(res => {
				if (res.data.code === 200) {
					this.totalOutputValueOption.title=res.data.data.title
					this.totalOutputValueOption.categoryAxis=res.data.data.categoryAxis
					this.totalOutputValueOption.seriesData=res.data.data.seriesData
					this.totalOutputValueOptionShow=true
				}
			}).catch(err => {})
		},
		//1.3.1.14石河子市三次产业结构变化(区域经济现状分析)
		constructionChange(){
			getCommonData10({busiCode: 'E089'}).then(res => {
				if (res.data.code === 200) {
					this.industrialStructureChangeOption.title=res.data.data.title
					this.industrialStructureChangeOption.categoryAxis=res.data.data.categoryAxis
					this.industrialStructureChangeOption.seriesData=res.data.data.seriesData
					this.industrialStructureChangeOptionShow=true
				}
			}).catch(err => {})
		},
		//1.3.1.15石河子市固定资产投资总额变化(区域经济现状分析)
		speedChange(){
			getCommonData10({busiCode: 'E090'}).then(res => {
				if (res.data.code === 200) {
					this.aggregateInvestmentOption.title=res.data.data.title
					this.aggregateInvestmentOption.categoryAxis=res.data.data.categoryAxis
					this.aggregateInvestmentOption.seriesData=res.data.data.seriesData
					this.aggregateInvestmentOptionShow=true
				}
			}).catch(err => {})
		},
		//1.3.1.16石河子市工农业总产值(区域经济现状分析)
		workersPeasantsChange(){
			getCommonData10({busiCode: 'E091',nameId:this.$route.query.nameId}).then(res => {
				if (res.data.code === 200) {
					this.agricultureTotalOption.title=res.data.data.title
					this.agricultureTotalOption.categoryAxis=res.data.data.categoryAxis
					this.agricultureTotalOption.seriesData=res.data.data.seriesData
					this.agricultureTotalOptionShow=true
				}
			}).catch(err => {})
		},
		//文字描述
		titleText(){
			getCommonData10({busiCode: 'C045'}).then(res => {
				if (res.data.code === 200) {
					this.toptitleText=res.data.data.list[0]
				}
			}).catch(err => {})
		},
		//返回
        back(){
            this.$router.go(-1)
        }
    },
	watch: {}
}
</script>

<style scoped lang="scss">
.economic-shihezi {
    padding:0 1.5vw;
    .describe{
        padding:0 2vw;
        margin-top: -2vh;
        color: #afdaff;
		text-align: left;
		font-size: 1.15vw;
		text-shadow: 0.2vw 0vw .3vw rgba(0,155,256,0.5),-.2vw 0vw .3vw rgba(0,155,256,0.5),0vw .2vw .3vw rgba(0,155,256,0.5),0vw -.2vw .3vw rgba(0,155,256,0.5);
    }
    .return{
        color: #03d3ff;
        display: flex;
        justify-content: flex-end;
        padding: 1.9vh 0;
        p{
            background:url("../../assets/images/return.png") top center no-repeat;
		    background-size:100% 100%;
            height: 3.7vh;
            line-height: 3.7vh;
            text-align: right;
            padding-right: 1.3vh;
            width: 4.6vw;
            cursor: pointer;
            font-size: 0.8vw;
        }
    }
}
</style>
